<template>
	<view class="comment-list">
		<view class="container">
			<view class="text">
				<text>留言</text>
			</view>
			<view v-if='comment.length'>
				<view class="list" v-for='(item,index)  in comment' :key='index'>
					<view class="comment-top-i">
						<view class="commentflex">
							<view class="comment-top-userimg">
								<!-- <image src="/static/image/index1.png" mode=""></image> -->
								<image :src=" '/static/image/' + item.userimage + '.png' " mode=""></image>
							</view>
							<view class="comment-top-username">
								<text>{{item.username}}</text>
							</view>
						</view>
						<view class="comment-top-time">
							<text>17:18</text>
						</view>
					</view>
					<view class="comment-input">
						<view class="comment">{{item.comment}}</view>
						<button class='remove' @click='remove(index)'><text>删除</text></button>
					</view>
				</view>
			</view>
			<view v-else>暂无留言<view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['comment'],
		data() {
			return {}
		},
		filters: {
			// 格式化时间
			formater(time) {
				let now = new Date().getFullYear();
				let reply = new Date(time).getFullYear()
				if (now == reply) {
					return `${new Date(time).getMonth() + 1}.${new Date(time).getDate()}`
				} else {
					return `${new Date(time).getFullYear()}.${new Date(time).getMonth() + 1}.${new Date(time).getDate()}`
				}
			}
		},
		methods: {
			remove(index) {
				this.$emit('removedata', index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.comment-list {
		width: 700rpx;
		margin: 0 auto;

		.container {
			.text {
				font-size: 37rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #000000;
				margin: 20rpx 0;
			}

			view {
				.list {
					padding: 20rpx;

					.comment-top-i {
						display: flex;
						justify-content: space-between;

						.commentflex {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.comment-top-userimg {
								display: flex;
								align-items: center;

								image {
									width: 59rpx;
									height: 59rpx;
									border: 1rpx solid #DDDDDD;
									border-radius: 50%;
								}
							}

							.comment-top-username {
								margin-left: 10rpx;

								text {
									font-size: 32rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #000000;
								}
							}
						}

						.comment-top-time {
							width: 90rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 24rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
							}
						}

					}

					.comment-input {
						padding-top: 20rpx;
						display: flex;

						.comment {
							width: 600rpx;
							font-size: 27rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}

						button {
							width: 140rpx;
							height: 50rpx;
							font-size: 20rpx;
						}
					}

				}
			}
		}
	}
</style>
